<div>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>任务列表</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div style="margin: 5px;">
        <el-button size="mini" type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新建
            <!--<i class="el-notification__icon el-icon-error" style="color: red;"></i>-->
        </el-button>
    </div>
    <div id="tasklist" v-if="!tableData || tableData.length > 0" style="font-size: 12px;">
        <el-table :data="tableData" border size="mini" :row-class-name="tableRowClassName">
            <el-table-column prop="name" label="名称" width="202"></el-table-column>
            <el-table-column prop="path" label="路径" ></el-table-column>
            <el-table-column prop="cron" label="执行计划" width="180"></el-table-column>
            <el-table-column prop="stateTitle" label="状态" width="60"></el-table-column>
            <el-table-column width="160" label="操作">
                <template slot-scope="scope">
                    <el-button @click="showEvent(scope.row.name)" a="scope.row.state" type="text" size="small">查看</el-button>
                    <el-button v-if="scope.row.state == 0" @click="changeState(scope.row.name,1)" type="text" size="small">暂停</el-button>
                    <el-button v-else @click="changeState(scope.row.name,0)" type="text" size="small">启动</el-button>
                    <el-button @click="delEvent(scope.row.name)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div v-else style="text-align: center;">
        暂无数据
    </div>

    <el-dialog title="添加节点" :visible.sync="dialogFormVisible" :center=true>
        <el-form :model="form" :rules="rules" ref="form" size="mini">
            <el-form-item label="名称：" prop="name" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off" size="mini" :maxlength="10"></el-input>
            </el-form-item>
            <el-form-item label="协议" :label-width="formLabelWidth">
                <el-select v-model="form.protocol" placeholder="请选择协议" @change="protoclEvent">
                    <el-option label="dubbo" value="dubbo"></el-option>
                    <el-option label="http" value="http"></el-option>
                    <el-option label="local" value="local"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item v-show="showArray.urlShow" label="注册地址" :label-width="formLabelWidth">
                <el-input v-model="form.url" auto-complete="off" size="mini" :maxlength="120"></el-input>
            </el-form-item>
            <el-form-item label="请求路径" :label-width="formLabelWidth">
                <el-input v-model="form.path" auto-complete="off" :maxlength="120"></el-input>
            </el-form-item>
            <el-form-item v-show="showArray.versionShow" label="版本号" :label-width="formLabelWidth">
                <el-input v-model="form.version" auto-complete="off" :maxlength="20"></el-input>
            </el-form-item>
            <el-form-item v-show="showArray.groupShow" label="分组" :label-width="formLabelWidth">
                <el-input v-model="form.group" auto-complete="off" placeholder="http协议（JSON文本输入json,get和表单形式为空）" :maxlength="30"></el-input>
            </el-form-item>
            <el-form-item label="方法名" :label-width="formLabelWidth">
                <el-input v-model="form.method" auto-complete="off" placeholder="http协议输入get/post,否则输入名称"  :maxlength="50"></el-input>
            </el-form-item>
            <el-form-item label="参数" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.parameters" auto-complete="off" placeholder="格式为JSON，如{name:'小明'}" :maxlength="300"></el-input>
            </el-form-item>
            <el-form-item label="执行计划" :label-width="formLabelWidth">
                <el-input v-model="form.cron" auto-complete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addEvent">确 定</el-button>
        </div>
    </el-dialog>
</div>